<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>事件发生以后，会发生一个事件对象，作为参数传给监听函数
        <br>Event对象属性
        <ol>
            <li>Event.Target属性返回事件当前所在的节点（点击谁，代码就返回谁）</li>
            <li>Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读</li>
        </ol>

        <br>Event对象方法
        <ol>
            <li>Event.preventDefault()方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了</li>
            <li>Event.stopPropagation()方法阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数</li>
        </ol>
        
    </p>

    <button id="btn">按钮</button>

    <a href="https://itbaizhan.com" id="it">itbaizhan</a>

    <script>
        var btn = document.getElementById("btn");
        //Event事件对象 其实就是参数
        // btn.onclick = function(event){}  只不过一般情况下event或者写成e都省略了

        // btn.onclick = function(e){
        //     console.log(event);
            
        // }

        btn.onclick = function(e){
            console.log(event.target);
            event.target.innerHTML = "点击之后";
            console.log(event.type);//click
 }
       
//  Event.preventDefault()方法取消浏览器对当前事件的默认行为。
//  比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了

        var it = document.getElementById("it");
        it.onclick = function(e){
            e.preventDefault();
            console.log("点击了itbaizhan");
            
        }
            
            
       
    </script>
</body>
</html>